require(['config'],()=>{
    require(['jquery','header'],()=>{
        require(['footer','floater'],()=>{
            class Cart {
                constructor() {
                    this.noLog = document.querySelector('#noLog')
                    this.cartEmpty = document.querySelector('#cartEmpty')
                    this.list = JSON.parse(localStorage.getItem('cart')) || []
                    this.table = document.querySelector('#cartMain')
                    this.numHeader = document.querySelector('.numHeader')
                    this.num = document.querySelector('.num')
                    this.body=document.querySelector('body')
                    this.priceTotal=document.querySelector('.total')
                    this.selectAll=document.querySelector('.selectAll')
                    this.init()
                }
                init() {
                    let res = this.list.every(item=>{return item.is_select == true})
                    if(res){
                        this.selectAll.checked = true
                    }else{
                        this.selectAll.checked = false
                    }
                    this.render()
                    this.bindHtml()
                    this.total()
                }
                render() {
                    let user = JSON.parse(localStorage.getItem('username'))
                    if (user) {
                        if (this.list.length) {
                            this.table.innerHTML = ''
                            this.list.forEach(item => {
                                this.table.innerHTML += `
                                    <tr>
                                        <td>
                                            <input type="checkbox" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}>
                                        </td>
                                        <td>
                                            <img src="${item.img_small_logo}">
                                        </td>
                                        <td>
                                            <div class="goodsTop clearfix">
                                                <div class="fl">
                                                    <h5>综训鞋</h5>
                                                    <p>单价：${item.price}元</p>
                                                </div>
                                                <div class="fr">
                                                    <span class="price">¥${(item.price * item.cart_number).toFixed(2)}</span>
                                                </div>
                                            </div>
                                            <div class="goodsBottom clearfix">
                                                <div class="fl">
                                                    <span>数量: </span>
                                                    <button class="sub" data-id="${item.goods_id}">-</button>
                                                    <input type="text" class="goodsNum" value="${item.cart_number}" data-id="${item.goods_id}" disabled>
                                                    <button class="add" data-id="${item.goods_id}">+</button>
                                                </div>
                                                <div class="fr">
                                                    <span class="del" data-id="${item.goods_id}">删除</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                `
                            })
                        } else {
                            this.table.innerHTML = ''
                            this.cartEmpty.style.display = 'block'
                        }
                        this.totalNum()
                        localStorage.setItem('cart', JSON.stringify(this.list))
                        let list = JSON.parse(localStorage.getItem('cart')) || []
                        let num = 0
                        list.forEach(item=>{
                            num += item.cart_number
                        })
                        $('.numHeader')[0].innerHTML= '&nbsp;'+num
                    } else {
                        this.numHeader.innerHTML= '&nbsp;'+ 0
                        this.num.innerHTML = '共 '+ 0 + ' 件' 
                        this.table.innerHTML = ''
                        this.noLog.style.display = 'block'
                    }
                    this.total()
                }
                bindHtml(){
                    //思维：使用数据驱动页面，不操作DOM
                    this.body.onclick = (e)=>{
                        let target = e.target || e.srcElement
                        //全选功能
                        if(target.className == 'selectAll'){
                            //拿到全选按钮的状态
                            let type = target.checked
                            this.list.forEach(item=>{
                                item.is_select = type
                            })
                            this.render()
                        }
                        //单选功能
                        if(target.className == 'select'){
                            //获取id
                            let id = target.dataset.id - 0
                            //拿到对应的数据
                            let goods = this.list.find(item=>{return item.goods_id == id})
                            goods.is_select = !goods.is_select
                            //当所有的单选选中的状态让全选选中
                            let res = this.list.every(item=>{return item.is_select == true})
                            if(res){
                                this.selectAll.checked = true
                            }else{
                                this.selectAll.checked = false
                            }
                            this.render()
                        }
                        //做增加商品数量功能
                        if(target.className == 'add'){
                            //获取id
                            let id = target.dataset.id - 0
                            //拿到对应的数据
                            let goods = this.list.find(item=>{return item.goods_id == id})
                            //注意点：真实项目中这里等于库存数量，这里写了固定值是为了方便调试代码
                            if(goods.cart_number == 10){
                                alert('亲，只能购买10件哦！')
                                return false
                            }
                            goods.cart_number++
                            this.render()
                        }
                        //做减少商品数量功能
                        if(target.className == 'sub'){
                            //获取id
                            let id = target.dataset.id - 0
                            //拿到对应的数据
                            let goods = this.list.find(item=>{return item.goods_id == id})
                            //注意点：真实项目中这里等于库存数量，这里写了固定值是为了方便调试代码
                            if(goods.cart_number == 1){
                                return false
                            }
                            goods.cart_number--
                            this.render()
                        }
                        //删除商品
                        if(target.className == 'del'){
                            //获取id
                            let id = target.dataset.id - 0
                            //拿到对应的数据
                            let index = this.list.findIndex(item=>{return item.goods_id == id})
                            this.list.splice(index, 1)
                            //判断数组是否为空
                            if(!this.list.length){
                                this.selectAll.checked = false
                            }
                            this.render()
                        }
                        //做删除选中的商品，点击全部删除按钮
                        if(target.className == 'delAll'){
                            //注意点：筛选出来的数据是没有选中状态的数据
                            let data = this.list.filter(item=>{return item.is_select == false})
                            //重新给数组赋值
                            this.list = data
                            //判断数组是否为空
                            if(!this.list.length){
                                this.selectAll.checked = false
                            }
                            this.render()
                        }
                        if(target.className=='quit'){
                            this.render()
                            this.priceTotal.innerHTML = `总计： 0.00元`
                        }
                    }
                }
                total(){
                    let price = 0
                    this.list.forEach(item=>{
                        if(item.is_select == true){
                            price += item.cart_number * item.price
                        }
                    })
                    this.priceTotal.innerHTML = `总计： ${price.toFixed(2)}元`
                }
                totalNum() {
                    let num = 0
                    this.list.forEach(item => {
                        num += item.cart_number
                    })
                    this.num.innerHTML = '共 '+ num + ' 件' 
                }
            }
            new Cart()
        })
    })
})